import React, { useState, useEffect } from 'react';
import { InputNumber, Checkbox } from 'antd';
import { TextWidget } from '@inbiz/react';

const StandoutView: React.FC<News.StandoutProps> = (props) => {
  const { onChange, value: formValue } = props;
  const [value, setValue] = useState<News.StandoutType>(formValue);

  useEffect(() => {
    onChange && onChange(value);
  }, [value]);

  return (
    <>
      <Checkbox
        style={{
          marginRight: 4,
        }}
        defaultChecked={value.isStandout}
        onChange={(e) => {
          setValue({
            ...value,
            isStandout: e.target.checked,
          });
        }}
      ></Checkbox>
      <InputNumber
        defaultValue={value.threshold}
        min={1}
        precision={0}
        onChange={(val) => {
          setValue({
            ...value,
            threshold: val,
          });
        }}
      />
      <div
        style={{
          border: '1px solid #d9d9d9',
          borderLeft: 'none',
          height: '32px',
          padding: '0 8px',
        }}
      >
        <TextWidget>News.tips.day</TextWidget>
      </div>
    </>
  );
};

export default StandoutView;
